<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>React Document</title>
</head>
<body>
  <div id='test'></div>
  <script src='../js/react.development.js'></script>
  <script src='../js/react-dom.development.js'></script>
  <script src='../js/babel.min.js'></script>
  <script type='text/babel'>
    class Weather extends React.Component {
      state = {
        isHot: true
      }
      // constructor(props) {
      //   super(props)
      //   this.state = {
      //     isHot: true
      //   }
      //   // 给changeWeather绑定实例
      //   // 拿原型上的changeWeather绑定到实例上的changeWeather2
      //   this.changeWeather2 = this.changeWeather.bind(this)
      // }
      render() {
        // 只能调用实例上的方法
        // return <h1 onClick={this.changeWeather2}>今天天气很{this.state.isHot?'炎热':'凉爽'}</h1>
        // 修改为箭头函数 箭头函数的this是外层的this
        return <h1 onClick={() => {this.setState({isHot: !this.state.isHot})}}>今天天气很{this.state.isHot?'炎热':'凉爽'}</h1>

      }
      // 类的原型上的方法 简洁版改为赋值语句+箭头函数
      changeWeather = () => {
        console.log(this)
        const isHot = this.state.isHot
        // 注意:直接更改 react不认state的值不会改变
        // 使用内置api修改state的值
        this.setState({isHot: !isHot})
      }
      // 需要在constructor中绑定this
      // changeWeather() {
      //   console.log(this)
      //   const isHot = this.state.isHot
      //   // 注意:直接更改 react不认state的值不会改变
      //   // 使用内置api修改state的值
      //   this.setState({isHot: !isHot})
      // }

    }
    ReactDOM.render(<Weather/>, document.getElementById('test'))
  </script>
</body>
</html>
<!--
  状态改变驱动页面改变
  [组件实例对象]的state属性
  函数组件没有this 没有实例

  构造器调用一次:初始化状态 解决this指向的问题
  render调用1+n次 1是初始化的一次 n是状态更新的次数

  类中可以直接写赋值语句 相当于往实例对象上追加一个属性


 -->